<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>自主选课</title>
	<style>
		body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			padding: 20px;
			min-height: 100vh;
			margin: 0;
		}

		table {
			border-collapse: collapse;
		}

		.header {
			background: linear-gradient(135deg, #667eea, #764ba2);
			color: white;
			padding: 25px;
			text-align: center;
			border-radius: 15px;
			margin-bottom: 25px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.search-container {
			background: white;
			padding: 25px;
			margin: 20px auto;
			width: 80%;
			border-radius: 15px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
			display: flex;
			flex-wrap: wrap;
			gap: 15px;
			align-items: center;
			justify-content: center;
		}

		.search-group {
			display: flex;
			gap: 10px;
			align-items: center;
		}

		.sort-container {
			background-color: #f0f0f0;
			padding: 15px;
			margin: 10px auto;
			width: 80%;
			border-radius: 5px;
			text-align: center;
		}

		.search-btn, .sort-btn {
			background: linear-gradient(135deg, #667eea, #764ba2);
			color: white;
			padding: 12px 25px;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			font-weight: 600;
			transition: all 0.3s ease;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.search-btn:hover, .sort-btn:hover {
			background: linear-gradient(135deg, #764ba2, #667eea);
			transform: translateY(-2px);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
		}

		.sort-select {
			padding: 8px;
			margin: 0 5px;
			border-radius: 4px;
			border: 1px solid #ccc;
		}

		.select-category, .input-keyword {
			padding: 12px;
			border-radius: 8px;
			border: 1px solid #ddd;
			transition: all 0.3s ease;
		}

		.select-category:focus, .input-keyword:focus {
			border-color: #667eea;
			outline: none;
			box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
		}

		.category-filter {
			display: flex;
			justify-content: center;
			gap: 10px;
			margin: 10px 0;
			flex-wrap: wrap;
		}

		.category-btn {
			padding: 10px 20px;
			background: #f8f9fa;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease;
			font-weight: 500;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
		}

		.category-btn.active {
			background: linear-gradient(135deg, #667eea, #764ba2);
			color: white;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.category-btn:hover:not(.active) {
			background: #e9ecef;
			transform: translateY(-2px);
		}

		.online-first, .offline-first {
			padding: 5px 10px;
			margin: 0 5px;
			border: 1px solid #ccc;
			border-radius: 4px;
			cursor: pointer;
			background-color: #f9f9f9;
		}

		.online-first.active, .offline-first.active {
			background-color: #4CAF50;
			color: white;
		}

		.message {
			padding: 15px;
			margin: 15px auto;
			border-radius: 8px;
			text-align: center;
			width: 80%;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		}

		.error {
			background: #ffebee;
			color: #c62828;
			border: 1px solid #ffcdd2;
		}

		.success {
			background: #e8f5e9;
			color: #2e7d32;
			border: 1px solid #c8e6c9;
		}
		
		.back-btn {
			display: block;
			text-align: center;
			margin-top: 25px;
		}

		.back-btn {
			display: block;
			text-align: center;
			margin-top: 30px;
		}

		.back-btn a {
			display: inline-block;
			padding: 12px 25px;
			background: linear-gradient(135deg, #95a5a6, #7f8c8d);
			color: white;
			border-radius: 8px;
			text-decoration: none;
			transition: all 0.3s ease;
			font-weight: 600;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.back-btn a:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
			text-decoration: none;
			color: white;
		}
	</style>
</head>
<body>
<div class="header">
	<h2>自主选课 - 当前校区: ${not empty param.campus ? param.campus : '未选择'}</h2>
</div>

<!-- 显示选课结果消息 -->
<c:if test="${not empty message}">
	<div class="message ${message.contains('成功') ? 'success' : 'error'}">
			${message}
	</div>
</c:if>

<div class="search-container">
	<form name="Seekfrom"
		  action="${pageContext.request.contextPath}/ElectCourse_Servlet"
		  method="post" style="display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: center;">
		<input type="hidden" name="campus" value="${not empty param.campus ? param.campus : ''}">

		<div class="search-group">
			<select name="select" class="select-category">
				<option value="名称">课程名</option>
				<option value="编号">课程ID</option>
				<option value="分类">课程分类</option>
				<option value="授课教师">授课教师</option>
			</select>
			<input type="text" name="name" placeholder="请输入搜索关键词" class="input-keyword"/>
		</div>

		<input type="submit" value="搜索课程" class="search-btn">
	</form>
</div>

<div style="width: 80%; margin: 0 auto; text-align: center;">
	<h3>按类别筛选</h3>
	<div class="category-filter">
		<button class="category-btn" onclick="filterByCategory('')">全部</button>
		<button class="category-btn" onclick="filterByCategory('人文')">人文</button>
		<button class="category-btn" onclick="filterByCategory('创新')">创新</button>
		<button class="category-btn" onclick="filterByCategory('艺术')">艺术</button>
		<button class="category-btn" onclick="filterByCategory('科学')">科学</button>
	</div>
</div>

<div class="sort-container">
	<form id="sortForm" action="${pageContext.request.contextPath}/ElectCourse_Servlet" method="post" style="display: inline-block;">
		<input type="hidden" name="campus" value="${not empty param.campus ? param.campus : ''}">
		<input type="hidden" name="category" value="${not empty param.category ? param.category : ''}">
		<input type="hidden" name="select" value="${not empty param.select ? param.select : ''}">
		<input type="hidden" name="name" value="${not empty param.name ? param.name : ''}">

		<label>排序方式：</label>
		<select name="primarySort" class="sort-select">
			<option value="none">不排序</option>
			<option value="onlineFirst" ${param.primarySort == 'onlineFirst' ? 'selected' : ''}>线上优先</option>
			<option value="offlineFirst" ${param.primarySort == 'offlineFirst' ? 'selected' : ''}>线下优先</option>
			<option value="credit" ${param.primarySort == 'credit' ? 'selected' : ''}>学分降序</option>
		</select>
		<select name="secondarySort" class="sort-select">
			<option value="none">不排序</option>
			<option value="onlineFirst" ${param.secondarySort == 'onlineFirst' ? 'selected' : ''}>线上优先</option>
			<option value="offlineFirst" ${param.secondarySort == 'offlineFirst' ? 'selected' : ''}>线下优先</option>
			<option value="credit" ${param.secondarySort == 'credit' ? 'selected' : ''}>学分降序</option>
		</select>
		<select name="thirdSort" class="sort-select">
			<option value="none">不排序</option>
			<option value="onlineFirst" ${param.thirdSort == 'onlineFirst' ? 'selected' : ''}>线上优先</option>
			<option value="offlineFirst" ${param.thirdSort == 'offlineFirst' ? 'selected' : ''}>线下优先</option>
			<option value="credit" ${param.thirdSort == 'credit' ? 'selected' : ''}>学分降序</option>
		</select>
		<input type="submit" value="应用排序" class="sort-btn">
	</form>
</div>

<table align="center" width="1000" border="1">
	<tr>
		<td align="center" bgcolor="yellow"><b>课程信息</b></td>
	</tr>
</table>
<table align="center" width="1000" border="1" height="120"
	   cellpadding="1" cellspacing="1">

	<tr align="center" bgcolor="#e1ffc1">
		<td><b>编号</b></td>
		<td><b>名称</b></td>
		<td><b>上课时间</b></td>
		<td><b>上课地点</b></td>
		<td><b>学分</b></td>
		<td><b>上课教师</b></td>
		<td><b>课程类型</b></td>
		<td><b>校区</b></td>
		<td><b>课程类别</b></td>
		<td><b>限制人数</b></td>
		<td><b>可选人数</b></td>
		<td><b>操作</b></td>
	</tr>
	<c:forEach items="${requestScope.list}" var="c">
		<tr align="center" bgcolor="white">
			<td>${c.getNo()}</td>
			<td>${c.getName()}</td>
			<td>${c.getTime()}</td>
			<td>${c.getPlace()}</td>
			<td>${c.getCredit()}</td>
			<td>${c.getTeacher()}</td>
			<td>${c.getCourseType()}</td>
			<td>${c.getCampus()}</td>
			<td>${c.getCategory()}</td>
			<td>${c.getLimitNum()}</td>
			<td>${c.getResidueNum()}</td>
			<td>
				<a href="${pageContext.request.contextPath}/ElectCourse_Servlet?id=elect&No=${c.getNo()}&campus=${not empty param.campus ? param.campus : ''}">选修</a>
			</td>
		</tr>
	</c:forEach>
</table>

<div class="back-btn">
	<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
</div>

<script>
	function filterByCategory(category) {
		// 更新按钮状态
		const buttons = document.querySelectorAll('.category-btn');
		buttons.forEach(btn => btn.classList.remove('active'));
		event.target.classList.add('active');

		// 构造表单并提交
		const form = document.createElement('form');
		form.method = 'POST';
		form.action = '${pageContext.request.contextPath}/ElectCourse_Servlet';

		const selectInput = document.createElement('input');
		selectInput.type = 'hidden';
		selectInput.name = 'select';
		selectInput.value = '分类';
		form.appendChild(selectInput);

		const nameInput = document.createElement('input');
		nameInput.type = 'hidden';
		nameInput.name = 'name';
		nameInput.value = category;
		form.appendChild(nameInput);

		const campusInput = document.createElement('input');
		campusInput.type = 'hidden';
		campusInput.name = 'campus';
		campusInput.value = '${not empty param.campus ? param.campus : ""}';
		form.appendChild(campusInput);

		document.body.appendChild(form);
		form.submit();
	}

	// 页面加载完成后，根据当前搜索条件设置按钮状态
	window.onload = function() {
		// 这里可以添加根据当前搜索条件设置按钮状态的逻辑
	};
</script>
</body>
</html>